<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href='./layer/need/layer.css' rel='stylesheet'>
    <title>Document</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }
        
        img {
            width: 100%;
        }
        
        body>div {
            margin: 25px 15px;
        }
        
        .intorImg {
            margin: 0;
        }
        
        p {
            font-size: 14px;
        }
        
        h3 {
            background-color: #5fb878;
            color: #fff;
            margin: 0 -15px;
            padding: 0 15px;
            line-height: 40px
        }
        
        .intorDetail h3 {
            background-color: #fff;
            color: #000;
        }
        
        .circulate li {
            border-bottom: 1px solid #ccc;
            padding-left: 30px;
            list-style: none;
            position: relative;
        }
        
        .circulate li:last-child {
            border: none
        }
        
        .circulate li h4::before {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #b8c4cd;
            position: absolute;
            top: 6px;
            left: 10px;
            border-radius: 50%;
        }
        
        ul {
            margin: 0;
            padding: 5px
        }
        
        .img-dv {
            float: right;
            line-height: 30px;
            color: #fff;
            background-color: #3598dc;
            border-radius: 5px;
            border: none
        }
    </style>
</head>

<body>
    <div class='intorImg'><img src='./img/u79.jpg'></div>
    <div class='intor'>

        <div class='intorDetail'>
            <h3>益达无糖口香糖 (热带水果味)</h3>
            <div>
                <p>规格：10片装</p>
                <p>产品标准：SB/T 10023</p>
                <p>生产厂商：箭牌糖果（中国）有限公司</p>
                <p>生产许可证编号：QS440113010050</p>
                <p>产地：广东省广州市</p>
            </div>
        </div>
    </div>
    <div class='batch'>
        <h3>批次信息</h3>
        <div class='batchDetail'>
            <p>生产批次：0010238</p>
            <p>生产日期：2017-01-15</p>
            <p>保质期：12个月</p>
        </div>
    </div>
    <div class='quality'>
        <h3>质检信息</h3>
        <div class='qualityDetail'>
            <p>质检单位：广州食品药品检测中心</p>
            <p>质检日期：2017-01-16</p>
            <p>质检结果：合格<button class='img-dv'>质检结果报告</button></p>
        </div>
    </div>
    <div class='burdening'>
        <h3>配料信息</h3>
        <div class='burdeningDetail'>
            <p> 食品添加剂：山梨糖醇、甘油、麦芽糖酵液</p>
            <p>口香糖胶姆基、精幼砂糖或其他甜味剂、乳化剂和香料</p>
        </div>
    </div>
    <div class='circulate'>
        <h3>流通信息</h3>
        <ul>
            <li>
                <h4>新疆飞翔食品商贸有限公司</h4>
                <p>进货量：600箱</p>
                <p>2017-02-05</p>
            </li>
            <li>
                <h4>昌吉华洋超市</h4>
                <p>进货量：100箱</p>
                <p>2017-02-13</p>
            </li>
            <li>
                <h4>昌吉华洋超市</h4>
                <p>进货量：200箱</p>
                <p>2017-02-15</p>
            </li>
        </ul>
    </div>
    <script src='./layer/layer.js'></script>
    <script>
        var btn = document.querySelector(".img-dv");
        btn.onclick = function() {
            var html = '<div style="position: absolute;top:5px;right:5px;width:20px;height:20px;" onclick="layer.closeAll()"><img src="img/closes.png"></div><div style="position: absolute;width:100%;height:100%;top:40%;left:50%;margin-left:-50%;margin-top:-50%;"><img src="img/yida.jpg" ></div>'
            var pageii = layer.open({
                style: 'border:none; background-color:#78BA32; color:#fff;',
                content: html
            });

        }
    </script>
</body>

</html>